<template>
    <view>
		<graceHeader  background="linear-gradient(to right, #B100FF 0%,#00B3FF 80%)">
			<text style="color: #FFFFFF; font-size:16px; font-weight:500;letter-spacing:2px; display: flex;justify-content: center; line-height:38px;height: 44px;">融辅导</text>
		</graceHeader>
		<view class="fixedHeader" v-show="hock"></view>
		<!-- 轮播图 start -->
		<view class="swiperMargin">
			<swiper class="grace-swiper swiper1" 
			autoplay="true" indicator-dots 
			indicator-color="rgba(255, 255, 255, 1)" 
			indicator-active-color="#FF0036" 
			style="height:267upx" 
			interval="3000">
				<swiper-item v-for="(item, index) in swiperItems" :key="index">
					<navigator url='' class="grace-img-in">
						<image :src="item.url" mode="widthFix"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>		
		<!-- 轮播图 end -->
		<!-- 推荐图标 start -->
		<view class="grace-grids grace-margin grace-mt">
			<navigator :url="item.navigationpath" class="items" v-for="(item, index) in indexCate" :key="index">
				<view class="icon">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view class="text">{{item.name}}</view>
			</navigator>
		</view>
		<!-- 推荐图标 end -->
<!-- 	<view class="grace-fixed-top grace-bg-green" :style="{top:top}">
			<text style="height:90px; line-height:90px; color:#FFFFFF;" class="grace-text-center grace-text">自定义内容</text>
		</view> -->
	   
       <scroll-view  :class="[isFixed ? 'grace-fixed-top' : '']"  class="grace-tab-title grace-body" scroll-x="true" id="grace-tab-title" :scroll-into-view="titleShowId">
			<view v-for="(tab, index) in tabs" 
			:key="index" :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']" 
			:id="'tabTag-'+index" @tap="tabChange">{{tab.text}}</view>
        </scroll-view>
        <swiper class="grace-body" 
		:current="swiperCurrentIndex" 
		@change="swiperChange" 
		:style="{height:tabHeight+'px'}">
            <!-- 循环新闻项目 -->
            <swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
                <scroll-view :scroll-y="isscroll" @scrolltolower="scrollend(newsIndex)" :style="{height:tabHeight+'px'}">
					<block v-for="(item, index) in news" :key="index">
						<navigator :url="'../artInfo/artInfo?artId='+item.id"
						   class="grace-news-list">
							<view class="item">
								<view class="img img-l">
									<image :src="item.article_img" mode="widthFix"></image>
								</view>
								<view class="body">
									<view class="title">{{item.title}}</view>
									<view class="desc">{{item.description}}</view>
								</view>
							</view>
							<view class="desc">
								<text class="grace-icons icon-eye"></text> {{item.click_num}}
								<text class="grace-icons icon-write" style="margin-left:10px;"></text> {{item.comment_num}}
								<text style="float:right;">{{item.create_time}}</text>
							</view>
						</navigator>
					</block>
                    <graceLoading :loadingType="tabs[tabCurrentIndex].loadingType"></graceLoading>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
	
var _self;
import graceImmersedStatusbar from "../../graceUI/components/graceImmersedStatusbar.vue";
import graceLoading from "../../graceUI/components/graceLoading.vue"
import graceHeader from '../../graceUI/components/graceHeader.vue';
export default {
    data() {
        return {
            swiperCurrentIndex: 0,
            tabHeight : 300,
			isscroll:false,
			swiperItems : [],
			indexCate : [],
            titleShowId : 'tabTag-0',
			// 动态吸顶
			isFixed : false,
			headerHeight : 100,
			hock:false,
			loadingType:0,
			//分类数据
			tabCurrentIndex: 0,
			tabs:[],	
			newsAll:[],
        }
    },
    onLoad:function(){
		_self = this;
		// 加载轮播
		this.gRequest.get(
			'/api/sliders',{},
			function(res){
				console.log(res,'swiper')
				this.setData({swiperItems:res}, this);
			}.bind(this)
		);
	   
		// 加载首页推荐图标
		this.gRequest.get(
			'/api/categories',{},
			function(res){
				console.log(res)
				this.setData({indexCate : res}, this);
			}.bind(this)
		);
		// 加载首页推荐分类及产品
		uni.request({
			url: 'http://ts.leftgodheart.top/api/broadcastcate',
			method: 'GET',
			data: {},
			success: res => {
				console.log(res,'tab')
				this.tabs = res.data;
				// 初始化新闻列表数组 元素数量与分类匹配
				for(var i = 0; i < this.tabs.length; i++){
					this.newsAll.push([]);
				}
				this.getNews();
				
			},
			
		});
		
    },
    onReady: function () {
        //获取屏幕高度及比例
        var winInfo = uni.getSystemInfo({
            success : res => {
                var windowHeight = res.windowHeight;
                //获取头部标题高度
                var dom = uni.createSelectorQuery().select('#grace-tab-title')
                dom.fields({size: true}, res2 => {
                    //计算得出滚动区域的高度
                    this.tabHeight = windowHeight - res2.height;
                }).exec();
            }
        });
		
		// 获取顶部内容高度
		uni.createSelectorQuery().select('#grace-tab-title').fields(
			{size: true}, function (res){
				if(!res){return ;}
				_self.headerHeight = res.height
			}
		).exec();	
    },
	// 下拉刷新事件
    onPullDownRefresh: function (){
		// console.log('111')
		// // 页码重置 
		// 
		// this.getNews();
    },
    methods:{
        tabChange: function (e) {
            var index = e.target.id.replace('tabTag-', '');
            this.swiperCurrentIndex = index;
            this.tabCurrentIndex    = index;
            this.titleShowId        = 'tabTag-'+index;
			if(this.tabs[this.tabCurrentIndex].page == 1){
				this.getNews();
			}
        },
        swiperChange: function(e){
            var index = e.detail.current;
            this.tabCurrentIndex = index;
            this.titleShowId = 'tabTag-'+index;
			if(this.tabs[this.tabCurrentIndex].page == 1){
				this.getNews();
			}
        },
        //每个选项滚动到底部
        scrollend:function(newsIndex){
			console.log(newsIndex)
		    if(this.newsAll[newsIndex].loadingType > 0 ){return false;}
			this.loadingType  = 1;
		    this.getNews();
			// 判断加载状态避免多次滚动时有加载尚未完成
			if(this.tabs[this.tabCurrentIndex].loadingType > 0){return false;}
			this.getNews();
        },
		onPageScroll:function(e){
				// 根据滚动高度动态吸顶
			if(e.scrollTop >= this.headerHeight ){
				this.isFixed = true;
				this.isscroll = true
				this.hock = true
			}else{
				this.isFixed = false;
			    this.isscroll = false
				this.hock = false
			}
		},
		// 加载新闻
		getNews : function(){
			console.log(this.tabs[this.tabCurrentIndex].cateId,'当前tab--ID')
		     console.log(this.tabs[this.tabCurrentIndex].page,'当前页码数')
			 
			this.tabs[this.tabCurrentIndex].loadingType = 1;
		 	this.gRequest.get("/api/broadcasts",{
				 cate_id:this.tabs[this.tabCurrentIndex].cateId,
				 pages:this.tabs[this.tabCurrentIndex].page
			 },
				function(res){
					console.log(res,'获取新闻')
					console.log(_self.newsAll)
					var arr =[];
					if(res.length < 4){
					  _self.tabs[_self.tabCurrentIndex].loadingType = 2;
					}else{
					  // _self.newsAll[_self.tabCurrentIndex] = _self.newsAll[_self.tabCurrentIndex].concat(res);
					  _self.tabs[_self.tabCurrentIndex].loadingType = 0;
					  
					}
			     	  _self.newsAll[_self.tabCurrentIndex] = _self.tabs[_self.tabCurrentIndex].page > 1 ? _self.newsAll[_self.tabCurrentIndex].concat(res) : res;
					  _self.tabs[_self.tabCurrentIndex].page ++;
				}
			);
		}
    },
    components:{
        graceLoading,
		graceHeader,
		graceImmersedStatusbar
    }
}
</script>
<style >
page{background:#FFFFFF;}
::-webkit-scrollbar{
  display: none;
}
.grace-news-list .imgs{height:150rpx; overflow:hidden; border-radius:0;}
image{border-radius:0 !important;}
.grace-grids .items{width:25%; padding:8px 0; box-sizing:border-box;}
.grace-grids .items .text{font-size:30upx;}
.grace-fixed-top{top:88upx;}
.fixedHeader{
	position: relative;
	height:48upx;
	width:100%;
	background:#FFFFFF;
}
.grace-tab-title{text-align: left;}
</style>